<template>
  <div class="home">
    <el-progress style="position: fixed; top: 0; width: 100%;" v-if="requestPercent > 0 && requestPercent < 100" :percentage="requestPercent" status="success"></el-progress>
    <Topbar />
    <div id="app-main" :class="!SiderbarCollapse ? 'full-width' : 'short-width'">
      <Siderbar/>
      <div id="table-content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Siderbar from '@/components/Sidebar/Index'
import Topbar from '@/components/Topbar/Index'
import {mapGetters} from 'vuex'
import Cookies from 'js-cookie';
import requestConfig from '@/api/config'
export default {
  name: 'Home',
  components: {
    Siderbar,
    Topbar
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters('setting', {
      SiderbarCollapse: 'sidebarCollapse',
      requestPercent: 'requestPercent'
    })
  },
  activated() {
    console.log('activated cooket:', Cookies.get('USER_NAME', { domain: '82.157.104.42' }))
    if (Cookies.get('USER_NAME') == '' || Cookies.get('USER_NAME') == undefined) {
      location.href = requestConfig[process.env.NODE_ENV].loginPage
    }
  },
  mounted() {
    console.log('cooket:', Cookies.get('USER_NAME', { domain: '82.157.104.42' }))
    if (Cookies.get('USER_NAME') == '' || Cookies.get('USER_NAME') == undefined) {
      location.href = requestConfig[process.env.NODE_ENV].loginPage
    }
    if (Cookies.get('USER_TYPE') == 'A') {
      location.href = requestConfig[process.env.NODE_ENV].adminPage
    }
    if (Cookies.get('USER_TYPE') == 'S') {
      location.href = requestConfig[process.env.NODE_ENV].studentPage
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .home{
    width: 100%;
    height: 100%;
  }
  #app-main{
    height: calc(100vh - 60px);
    width: 100%;
    overflow: scroll;
    transition: width 0.5s;
  }
  #table-content{
    width: calc(100vw - 280px);
    float: right;
    height: 100%;
    overflow: scroll;
    padding: 10px;
  }

  .el-progress-bar{
    padding:0 !important;
  }
  .el-progress-bar__inner{
    width: 100% !important;
  }

</style>